<template>
<div>
  <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item v-for="(field,key) in field_list" :key="key" :label="field.verbos_name">
      <!--1.显示input框-->
      <a-input v-if="field.field_type === 'input'"
               v-model="field.value"
               @change="addDataBind()" />

      <!-- 2.显示textarea框-->
      <a-input v-if="field.field_type === 'textarea'"
               v-model="field.value"
               :auto-size="{ minRows: 6, maxRows: 20 }"
               @change="addDataBind()" type="textarea" />


      <!-- 3.kvselect-->
      <a-select v-model="field.value" v-if="field.field_type === 'kvselect'"
                @change="addDataBind()" placeholder="please select your zone">
        <a-select-option  v-for="(select_val,key)  in field.field_datasource" :key="key" :value="select_val.value">
          {{ select_val.label }}
        </a-select-option>
      </a-select>

    </a-form-model-item>

<!--提交按钮-->
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="clickSubmitButton">
        Create
      </a-button>
      <a-button style="margin-left: 10px;">
        Cancel
      </a-button>
    </a-form-model-item>
  </a-form-model>

    <div style="margin-bottom: 20px">
      <h2 class="h2">审批流：</h2>
      <!-- <div  class="div1"> -->

      <a-steps class="step">
        <a-step v-for="(approve,key) in approveConf" status="wait" :title="approve.approve_user.approve" :key="key">
          <a-icon slot="icon" type="user" />
        </a-step>

      </a-steps>
    <!-- </div> -->
    </div>

  </div>


</template>
<script>
import { getFlowConfInfo, addWorkOrderInstance  } from '@/http/api.js'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      testFrom:{
        name:'',
        passwrod:''
      },
      flowconfData: {
        id:'',
        name:'',
        customfield:'',
        description:'<h2 style="color: red">11111</h2>',
      },
      form: { },
      field_list: [],
      approveConf: [
        {
          "id": 1,
          "approve_user": {
            "approve": "tom",
            "approve_type": "指定人员"
          },
          "flowconf": "请假工单",
          "sequence": 1,
          "approve_type_id": "1",
          "approve_id": "1"
        },
        {
          "id": 2,
          "approve_user": {
            "approve": "manager",
            "approve_type": "角色组审批"
          },
          "flowconf": "请假工单",
          "sequence": 2,
          "approve_type_id": "1",
          "approve_id": "2"
        }
      ]
    };
  },
  // props:['form','field_list'],
  methods: {
    initFormData(){
      getFlowConfInfo({ id: this.flowconfData.id }).then( resp => {
        this.flowconfData.id = resp.id;                     // FlowConf的id
        this.flowconfData.name = resp.name;                 // FlowConf的name
        this.flowconfData.description = resp.description;   // FlowConf中工单描述
        this.approveConf = resp.approveconf_set;            // FlowConf中配置的审批流

        // FlowConf中配置的customfield字段，但是字符串格式，这里需要转换成json格式
        const customfieldText = resp.customfield            // 获取FlowConf中自定义字段的字符串json格式
        var customfieldJson = JSON.parse(customfieldText);  // 把字符串json格式转换成json对象
        this.form = customfieldJson.form;                   // Form表单中数据绑定的from字段
        this.field_list = customfieldJson.field_list;       // 定义有哪些字段的列表

      }).catch(err=>{
        console.log(err, 'errr')
      })
    },

    // form表达提交数据


    // 当form中填入数据改变触发，将field_list中的值绑定到form中
    addDataBind() {
      for(var i in this.form){
        const val = this.getInputValue(i);
        this.form[i] = val;
      }
    },

    // getInputValue：找到 form 中key对应的值
    getInputValue (key) {
      for(var i=0;i<this.field_list.length;i=i+1){
        const fileld_dic = this.field_list[i];
        const k1 = fileld_dic['name'];
        if(key == k1){
          return fileld_dic['value']
        }
      }
      return ''
    },
    // form表达提交数据
    onSubmit() {
      console.log('submit!', this.form);
      // this.form.flowconf_id = this.flowconfData.id
      const parameter = {}
      parameter['flowconf_id'] = this.flowconfData.id
      parameter['form'] = this.form
      parameter['field_list'] = this.field_list
      addWorkOrderInstance(parameter).then(resp =>{
        const workorder_id = resp.results.workorder_id
        this.$router.push( '/Showgd?id=' + workorder_id)
      }).catch(err =>{
        alert(err)
      })
    },
    clickSubmitButton(){
        this.onSubmit();
    },


  },
  created(){
    this.flowconfData.id = this.$route.query.id
    this.initFormData()
  },
};
</script>
<style>
.h2{
  float: left;
}
.step{
  margin: 0 auto;
}
</style>
